<template>
  <!-- 搜索工作栏 -->
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="80px"
    >
      <el-form-item label="" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入仓库名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>

      <el-form-item label="" prop="status">
         <el-select v-model="queryParams.status" clearable placeholder="请选择开启状态" class="!w-240px">
          <el-option
            v-for="item in statusOptions"
           :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
        <el-button
          type="primary"
          plain
           @click="btnAdd"
          v-hasPermi="['erp:warehouse:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
        <el-button
          type="success"
          plain
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['erp:warehouse:export']"
        >
          <Icon icon="ep:download" class="mr-5px" /> 导出
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <!-- 列表 -->
  <ContentWrap>
    <el-table
      v-loading="loading"
      :data="dataList"
      border
      style="width: 100%"
    >
      <el-table-column label="仓库编号" align="center" prop="id" min-width="120" />
      <el-table-column label="仓库名称" align="center" prop="name" min-width="120" />
      <el-table-column label="仓库地址" align="center" prop="address" min-width="100" />
      <el-table-column label="负责人" align="center" prop="principal" min-width="100" />
      <el-table-column label="仓储费(元)" align="center" prop="warehousePrice" min-width="120" />
      <el-table-column label="搬运费(元)" align="center" prop="truckagePrice" min-width="120" />
      <el-table-column label="开启状态" align="center" prop="status" min-width="120" />
      <el-table-column label="备注" align="center" prop="remark" min-width="140"/>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
        <el-button link type="primary" size="small" @click="handleClick(scope.row)">
          编辑
        </el-button>
        <el-button link type="danger" size="small" @click="btnDetail(scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
    </el-table>
 
    <!-- 分页 -->
    <div class="footer-area">
        <el-pagination
      v-model:pageNo="queryParams.pageNo"
      v-model:pageSize="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
      </div>
  </ContentWrap>


  
   <!-- 新增弹框 -->
  <docking v-model="dockShow" @confirm="btnconfirm" :ids="ids" />
</template>
<script lang="ts" setup>
import docking from './components/add.vue'
import { warehouseApi } from '@/api/erp/foundation/warehouse'
import { h } from 'vue'
import { StockApi, DictItemConfigVO } from '@/api/erp/stock/stock'
import { dateFormatter } from '@/utils/formatTime'
import * as RefundApi from '@/api/pay/refund'
import * as AppApi from '@/api/pay/app'
import download from '@/utils/download'
import type { TableColumnCtx } from 'element-plus'
import type { VNode } from 'vue'
const dockShow = ref(false)
const list = ref([]) // 列表的数据
const message = useMessage() // 消息弹窗

const loading = ref(false) // 列表遮罩层
const total = ref(0) // 列表的总页数
const isExpanded = ref(false)
// 切换展开状态
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}

 
const dialogVisible = ref(false)
// const tempVisibleColumns = ref({ ...visibleColumns.value })
const searchConfig = ref([
  {
    prop: 'shipmentNumber',
    placeholder: '请输入入库编号',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'materialKey',
    placeholder: '请选择单据类型',
    type: 'select',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入物料名称/编号',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入规格',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入型号',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入关联单号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入建议供应商',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入仓库',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入库区',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入库位',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入销售订单编号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入客户订单编号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'createTime',
    type: 'dateRange',
    startPlaceholder: '制单开始日期',
    endPlaceholder: '制单结束日期',
    showInCollapsed: false
  }
])
const dataList=ref([])
const name=ref("")
const pageNo=ref(1)
const pageSize=ref(10)
const ids=ref("")
/** 初始化 **/
onMounted(async () => {
  getpageList()
})
//新增刷新列表
function btnconfirm() {
  getpageList()
}
//删除
function btnDetail(e){
  console.log('这是什么',e.id)
  ids.value=e.id
  ElMessageBox.confirm(
    '确实是否删除该数据',
    
    {
      confirmButtonText: 'OK',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
   
      warehouseApi.delete(ids.value).then((res)=>{
        console.log('这是啥',res)
        if(res == true){
          getpageList()
          ElMessage({
        type: 'success',
        message: '操作成功',
      })
        }
      })
      
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}
const status=ref("")
//分页
function  handleSizeChange(e){
  pageSize.value=e
  getpageList()
}
function handleCurrentChange(e){
  pageNo.value=e
  getpageList()
}
//列表接口
const getpageList = async ()=> {
       let parm={
        name:name.value,
        pageNo:pageNo.value,
        pageSize:pageSize.value,
        status:status.value
       }
  warehouseApi.pageList(parm).then((res)=>{
    console.log('列表的数据',res)
      dataList.value=res.list
      total.value=res.total
      for(let item of dataList.value){
        if(item.status == '0'){
          item.status='开启'
        }else{
          item.status='关闭'
        }
      }
  })
}
//打开新增弹框
function btnAdd(){
  ids.value=''
  dockShow.value=true
}
//编辑
function handleClick(e){
  ids.value=e.id
  dockShow.value=true
}
const btnLie = () => {
  tempVisibleColumns.value = { ...visibleColumns.value }
  dialogVisible.value = true
}


const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: undefined,
  status: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出等待

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1

}

/** 查询列表 */

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

/** 预览详情 */
const detailRef = ref()
const openDetail = (id: number) => {
  detailRef.value.open(id)
}
</script>
<style scoped>
.footer-area{
  display: flex;
    padding-bottom: 14px;
    margin-top: 26px;
    justify-content: end;
  
}

:deep(.el-table__footer-wrapper tfoot td) {
  background-color: #fff3e0;
}

.expand-toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 12px;
  color: #909399;
}

/* 使表单行间距更合理 */
.el-form-item {
  margin-bottom: 10px;
}

.order-font {
  padding: 2px 0;
  font-size: 12px;
}
</style>
